|
|
I. Estrutura Básica - Frame Document O "Frame Document" é um arquivo onde se define a estrutura das janelas para seu hiperdocumento em HTML. Quantas serão e qual sua distribuição em tela. Neste documento as marcações <body> e seu par </body> são substituídas por <frameset> e </frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nível na estrutura do seu serviço de informações baseado em WWW. Pronto, agora é preciso definir cada frame/janela internamente à(s) área(s) de frameset. Ou seja, as características de cada janela e seus "conteúdos" - URL incial. Cada janela/frame é antecedido da marcação <frame>, como numa lista cada item é antecedido por <li>. Usualmente, uma URL virá associada a cada frame. A estrutura mínima do frame document será então:
<head> <title></title> </head> <frameset ...> <frame src="URL"> <frame src="URL"> </frameset> </html> Atenção: Note que com apenas essas marcações o documento da estrutura - Frame Document - não funciona. É necessário que esteja definido algum atributo para as áreas de frameset, assim como associadas urls a cada frame, como veremos mais adiante. Atenção II: Você poderá ter - e provavelmente terá - vários <frameset> intercalados. Da mesma foma como é possível intercalar listas, ou tabelas em HTML. Cada uma destas marcações - <frameset> e <frame>
- aceita extensões, valores e atributos, como veremos a seguir.
II. Sintaxe
b. Frame c. Noframes a. Frameset
Frameset aceita os atributos ROWS e COLS, referentes divisões horizontais(como linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a marcações FRAMESET só poderão aparecer outras FRAMESET, FRAME ou NOFRAMES. Importante: Não podem ser utilizadas as marcações válidas entre marcações <BODY></BODY> nem internamente a marcações FRAMESET, nem antes dela, senão FRAMESET será ignorada. ATRIBUTOS 1. ROWS (<frameset rows=“valor, valor, valor...”>)
Este valor poderá ser:
Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual,
sempre somando um valor de 100%.
Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois terços da tela, e o segundo um terço. Exemplos : 1. Para dividir a tela do browser em três janelas horizontais, sendo que a do meio é mais larga que as de cima e de baixo:
<head>
<frameset rows="20%, 60%, 20%">
</html>
<head>
<frameset rows="30, *, 50"> <frame src="cell1.html">
</frameset> </html> 2. COLS (<frameset cols=“valor, valor, valor.. “>)
Exemplos Para dividir a tela do browser em três janelas verticais 1.Três colunas, sendo que a do meio é mais larga que as
de cima e de baixo:
<head>
<frameset cols="20%, 60% ,20%"> <frame src="cell1.html">
</frameset> </html>
<head>
<frameset cols="200, *, 100"> <frame src="cell1.html">
</frameset> </html> Atenção, para intercalar janelas verticais e horizontais,
será necessário definir várias áreas "FRAMESET".
Para cada área delimitida como "FRAMESET" você poderá
definir número de linhas OU colunas. Veremos como fazê-lo
mais adiante. Não é possível definir COLS e ROWS para
uma mesma área “FRAMESET”.
b. Frame A marcação FRAME define cada janela contida em uma área “frameset”. Esta marcação não necessita de uma tag de finalização (</frame>) e aceita 6 atributos possíveis: 1. SRC="url"
2. NAME="nome_da_janela"
3. MARGINWIDTH="valor"
Este atributo é opcional, caso não venha definido, o browser usará o seu padrão para definir as margens no frame/janela. 4. MARGINHEIGHT="valor"
5. SCROLLING="yes/no/auto"
O padrão é AUTO, portanto, se o atributo scrolling não vier definido, o browser aplicará a barra de rolagem, sempre que necessário. 6. NORESIZE
Um frame, com todos os atributos definidos seria escrito assim, por exemplo: <frame src=“http://www.cr-df.rnp.br” name=“home” marginwidth=“5”
marginheight=“5” scrolling=“auto” noresize>
Esta marcação possibilita que se crie uma opção de navegação na página para quem não possui um browser que entende frames. Esta marcação aparece no documento de estrutura "Frame document", e sempre é usada em pares (<noframes>.. conteúdo... </noframes>). Quando o acesso for feito através de um browser que entenda frames, o que estiver entre as marcações "noframes" será simplesmente ignorado. Internamente a uma área "noframes" deverá ser usada a estrutura padrão de documentos html (<head> </head>, <title> </title> <body> </body>, etc...). Um exemplo:
<head>
<FRAMESET ROWS="15%, 85%">
<hr> </body>
</html> Veja como ela é exibida, por exemplo, com o MOSAIC (não
lê frame) e com o NETSCAPE (lê frame).
III. Intercalando Frameset - exemplos Para tornar mais claro como se constrõem múltiplas e intercaladas janelas - divisões horizontais e verticais - utilizando das marcações de frames, seguem abaixo dois exemplos de construção de documentos com múltiplas janelas. Exemplo 1
<head>
<frameset rows="30%, 70%"> <frameset cols="33%, 33%, 33%">
<frameset cols="50%, 50%">
</html>
<head>
<frameset rows="15%, 85%"> <frame src="teste5.htm"> <frameset cols="25%, 75%">
<frameset rows="85%, 15%">
</frameset>
A marcação TARGET, permite que se controle em qual janela um link específico será exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espécie de indíce do serviço de informação e outra janela em que a navegação propriamente dita vai ocorrer. Desta forma, o índice está permanentemente disponível durante toda a consulta. Para utilizar este recurso você deverá: 1. Atribuir um "name" a cada frame em seu "frame document" (name="valor").
<a href="URL" target="valor"> Onde este valor é idêntico àquele associado à marcação name no frame document. Exemplo:
<title>Título</title></head> <frameset rows="80%, 20%"> <frame name="navega"" src="teste3.htm">
</frameset>
<head><title>Título</title>
Marcação Função / características
<frameset></frameset> delimita as janelas a serem usadas no documento.
Podem haver vários frameset intercalados. Controla o comportamente
das janelas através de seus atributos.
1. Numérico - em pixels = <frameset rows="30, 50">
<frame NAME="valor"> associa um nome a uma janela <frame MARGINWIDTH="valor"> determina margem direita/esquerda em cada frame <frame MARGINHEIGHT="valor"> determina margem superior/inferior em cada frame <frame SCROLLING="yes/no/auto"> define presença, ausência, ou atribuição automática (pelo browser) de barras de rolagem <frame NORESIZE > mantém fixo o tamanho de cada janela/frame <noframe></noframe> delimita área para navegação opcional, destinada a quem usa browser que não entenda 'frame'.Internamente, recebe a marcação <body></body> delimitando o documento, e todas as demais marcações HTML. Target <a href="URL" target="name"> Define a janela em que será exibido um link ao ser ativado. O name associado deverá ser idêntico ao name atribuído a janela de destino no “frame document”. |
|
||
Este tutorial introduz inovações na maneira de programar páginas para a Internet. Como pré-requisito é necessário saber programar na linguagem html. Consulte o Manual de HTML, se necessário. OBS.: Para visualizar
inovações de layout programadas em Cascading Style Sheet
- também conhecido por CSS - é necessário
um Internet Explorer versão 3.0 ou superior, ou Netscape
Navigator a partir da versão 4.0. Se você ainda não
possui um browser 4.0, pode atualizá-lo fazendo o download a partir
do site da Micorsof. Se você já possui um navegador compatível,
visite a Microsoft
CSS Gallery <http://www.microsoft.com/truetype/css/content.htm>
para ver alguns bons exemplos de Style Sheets.
• Introdução • O que Style Sheets podem fazer • Adicionando estilo a sua página PARTE II:
PARTE III:
Se você se interessa pela criação de home pages já deve ter ouvido falar em Cascading Style Sheets, ou CSS apenas. Trata-se de um padrão de formatação para páginas web que vai além das limitações impostas pelo html. Proposto pelo W3 Consortium <http://www.w3.org> - uma espécie de comitê que define os padrões de programação para a WWW - o CSS foi introduzido pela primeira vez pela Microsoft, no lançamento do Internet Explorer 3.0. O Cascading Style Sheet permite uma versatilidade maior na programação do layout de páginas web sem aumentar o seu tamanho em Kb, pois oferece várias possibilidades que antes só eram conseguidas com a utilização de gifs e jpgs. Basicamente, o CSS permite ao designer um controle maior sobre os atributos tipográficos de uma home page, como tamanho e cor das fontes, espaçamento entre linhas e caracteres, margem do texto, entre outros. Introduziu também às páginas a utilização de layers, permitindo a sobreposição de texto sobre texto ou texto sobre figuras. Para visualizar inovações
de layout programadas em Cascading Style Sheet é necessário
um Internet Explorer versão 3.0 ou superior. O Netscape incorporou
o CSS em seu código a partir da versão 4.0. Se você
ainda não possui um browser 4.0, pode atualizá-lo na nossa
seção de download.
O que Style Sheets podem fazer Utilizando uma boa combinação de tags do código de programação html, como <B>, <I>, <H1> e <FONT>, podemos criar páginas interessantes sob o ponto de vista do design. Entretanto, as possibilidades que elas oferecem são bastante limitadas se comparadas às oferecidas pelo CSS. Comandos de Style Sheets podem ser aplicados a toda e qualquer tag, modificando seus atributos. Até mesmo a tag <P> possui um </P> opcional e permite que você defina os atributos de tudo o que fiar compreendido entre as duas. Você pode, por exemplo, trocar os atributos de uma tag <B>, que tradicionalmente adiciona negrito a uma palavra: Este e' o negrito normal. Agora vamos trocar os atributos da tag para mostrar o negrito em uma cor diferente: Este é o resultado final em CSS. Não esqueça de que você só vai visualizar este exemplo se estiver utilizando um browser que suporte CSS. O Style Sheets permite a você, por exemplo, configurar todos os comandos <B> em uma página ou em um site inteiro de uma só vez.
Adicionando Estilo a Sua Página Style Sheets podem ser utilizados de três maneiras diferentes: local (modificando uma tag específica de uma página), geral (modificando determinados atributos para a toda a página) ou global (quando criamos um modelo que será aplicado a várias páginas simultaneamente). • Adicionando estilo localmente: Style Sheet pode modificar os atributos de uma única tag específica, em um determinado ponto de uma página. Os comandos em CSS aplicados localmente seguem a seguinte sintaxe: <tag STYLE="propriedade:valor; propriedade, valor;"...> Pelo código html normal, o tamanho máximo de uma fonte que podemos obter é estipulado pela tag <FONT>. Utilizando o CSS podemos aumentar o tamanho com que as letras seriam tradicionalmente mostradas. <FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE="+7">PALAVRA</FONT> aparecerá assim: PALAVRA Introduzindo comandos de CSS na tag podemos modificar seus atributos para mostrar a frase com outra cor e em tamanho maior. <FONT style="font-size:27pt; color:pink; line-height:30pt; font-family:Trebuchet MS, Arial, Helvetica;">PALAVRA</FONT>, aparecerá desta maneira: PALAVRA Com o CSS não hálimites para o tamanho da fonte. Ele pode ser definido em pontos, pixels e outras unidades. Veremos isso em detalhes mais adiante.
Para criar um modelo padrão de CSS que será aplicado a toda uma página, introduzimos o comando STYLE no cabeçalho do documento, entre a tag HTML e a tag BODY. Dessa forma, tudo o que vier no conteúdo da página obedecerá aos comandos CSS estipulados uma única vez. Veja a seguir: <HTML>
<!--
Note que o que está dentro da tag STYLE aparece em comentário <!-- -->. Isso serve para evitar problemas com browsers que não suportam CSS. Estando entre comentários, os atributos funcionarão normalmente em browsers com capacidade para CSS e serão desprezados por browsers mais antigos. Classes
- Especificação geral: <!--
- No HTML os Códigos parecerão assim: <P
CLASS="importante"> Este texto será vermelho</P>
Podemos criar um único
modelo de Style Sheets para ser aplicado a múltiplas páginas.
Para tanto, devemos construir um modelo separado de Style Sheets
e salvá-lo em um arquivo de terminação .css
<HTML>
Para aplicar o modelo a uma página html específica, basta chamar o arquivo .css no seu cabeçalho: <HEAD> < link rel=stylesheet href="exemplo.css" type="text/css"> </HEAD> Outra maneira de aplicar o modelo CSS é importá-lo. A diferença entre lincá-lo a página como no exemplo acima e importá-lo é que a segunda maneira permite acrescentar estilos na própria página que está editando, sem precisar alterar o modelo global (o arquivo .css). Veja o exemplo a seguir: <HTML>
<BODY>
IMPORTANTE: No caso de uma mesma página ter mais de um estilo aplicado, para saber qual predominará deve-se pensar da seguinte forma: o estilo mais específico prevalece. No caso, se uma página contém uma especificação de estilo geral ou global, você pode acrescentar novos atributos locais diferentes. Dessa forma: • Especificações
locais
|
||
 |
||